<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云书签 - 智能导航与云收藏</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="move-bookmark-styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="header-content">
                <h1><i class="fas fa-cloud"></i> 云书签</h1>
                <p class="subtitle">智能导航与云收藏，随时随地管理您的网站书签</p>
                <div class="features-highlight">
                    <span class="feature-tag">
                        <i class="fas fa-bookmark"></i> 自定义收藏夹
                    </span>
                    <span class="feature-tag">
                        <i class="fas fa-sync-alt"></i> 多端同步
                    </span>
                    <span class="feature-tag">
                        <i class="fas fa-mobile-alt"></i> 移动端支持
                    </span>
                </div>
            </div>
            <div class="auth-section">
                <button id="loginBtn" class="login-btn" onclick="showLogin()">
                    <i class="fas fa-user"></i> 登录
                </button>
                <button id="registerBtn" class="register-btn" onclick="showRegister()">
                    <i class="fas fa-user-plus"></i> 注册
                </button>
                <div class="user-menu" id="userMenu" style="display: none;">
                    <div class="user-info" onclick="toggleUserDropdown()">
                        <i class="fas fa-user-circle"></i>
                        <span id="currentUsername">用户</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="user-dropdown" id="userDropdown">
                        <a href="#" onclick="showPersonalBookmarks()" class="menu-item-primary">
                            <i class="fas fa-bookmark"></i> 我的收藏
                        </a>
                        <a href="#" onclick="showRecommendedNavigation()">
                            <i class="fas fa-compass"></i> 推荐导航
                        </a>
                        <a href="#" onclick="showProfile()">
                            <i class="fas fa-user"></i> 个人资料
                        </a>
                        <hr>
                        <a href="#" onclick="logout()">
                            <i class="fas fa-sign-out-alt"></i> 退出登录
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 个人收藏区域 (登录后显示) -->
        <div class="add-bookmark-section" id="personalSection" style="display: none;">
            <div class="add-form">
                <div class="input-group">
                    <input type="text" id="websiteName" placeholder="网站名称" required>
                    <input type="url" id="websiteUrl" placeholder="https://example.com" required>
                    <select id="categorySelect" class="category-select">
                        <option value="">选择分组...</option>
                    </select>
                    <button id="addBookmark" class="add-btn">
                        <i class="fas fa-plus"></i> 添加收藏
                    </button>
                </div>
                <div class="form-actions">
                    <button id="manageCategoriesBtn" class="manage-btn">
                        <i class="fas fa-cog"></i> 管理分组
                    </button>
                </div>
            </div>
        </div>

        <!-- 用户功能介绍区域 -->
        <div class="user-features-info" id="userFeaturesInfo">
            <div class="info-cards">
                <div class="info-card">
                    <div class="card-icon">
                        <i class="fas fa-user-plus"></i>
                    </div>
                    <h3>注册账户</h3>
                    <p>创建专属账户，享受个性化收藏体验</p>
                    <ul>
                        <li>无限收藏网站</li>
                        <li>自定义分组管理</li>
                        <li>快速搜索定位</li>
                    </ul>
                </div>
                <div class="info-card">
                    <div class="card-icon">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <h3>智能分组</h3>
                    <p>自定义收藏夹分组，让网站管理井井有条</p>
                    <ul>
                        <li>自定义分组名称</li>
                        <li>个性化图标颜色</li>
                        <li>拖拽排序功能</li>
                    </ul>
                </div>
                <div class="info-card">
                    <div class="card-icon">
                        <i class="fas fa-cloud-sync-alt"></i>
                    </div>
                    <h3>云端同步</h3>
                    <p>数据云端存储，电脑手机无缝同步</p>
                    <ul>
                        <li>实时数据同步</li>
                        <li>多设备访问</li>
                        <li>永不丢失</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 推荐导航区域 (默认显示) -->
        <div class="recommended-section" id="recommendedSection">
            <div class="section-header">
                <h2><i class="fas fa-star"></i> 推荐导航</h2>
                <p class="section-subtitle">精选优质工具和学习资源，助力您的工作与学习</p>
            </div>

            <!-- 个性化推荐区域 (登录后显示) -->
            <div class="personalized-recommendations" id="personalizedRecommendations" style="display: none;">
                <div class="recommendation-section">
                    <h3><i class="fas fa-magic"></i> 为您推荐</h3>
                    <p class="recommendation-subtitle">基于您的收藏偏好，为您精选相关工具</p>
                    <div class="tools-grid" id="smartRecommendations">
                        <!-- 智能推荐将在这里动态生成 -->
                    </div>
                </div>
            </div>
            
                <!-- 月度榜单区域 -->
            <div class="monthly-rankings">
                <!-- 全网推荐 Top 10 -->
                <div class="ranking-section">
                    <div class="ranking-header">
                        <div class="ranking-title">
                            <h3><i class="fas fa-fire"></i> 全网推荐 Top 10</h3>
                            <p>精选全网最受欢迎的优质网站推荐</p>
                        </div>
                        <div class="ranking-badge popular-badge">
                            <span class="badge-text">热门推荐</span>
                        </div>
                    </div>
                    <div class="ranking-grid" id="monthlyEfficiencyTools">
                        <!-- 月度效率工具将在这里动态生成 -->
                    </div>
                </div>

                <!-- 学生必备学习网站 Top 5 -->
                <div class="ranking-section">
                    <div class="ranking-header">
                        <div class="ranking-title">
                            <h3><i class="fas fa-graduation-cap"></i> 学生必备学习网站 Top 5</h3>
                            <p>学霸都在用的优质学习平台</p>
                        </div>
                        <div class="ranking-badge student-badge">
                            <span class="badge-text">学生专享</span>
                        </div>
                    </div>
                    <div class="ranking-grid top5-grid" id="studentEssentialSites">
                        <!-- 学生必备网站将在这里动态生成 -->
                    </div>
                </div>

                <!-- AI工具精选 Top 5 -->
                <div class="ranking-section">
                    <div class="ranking-header">
                        <div class="ranking-title">
                            <h3><i class="fas fa-robot"></i> AI工具精选 Top 5</h3>
                            <p>引领未来的智能工具推荐</p>
                        </div>
                        <div class="ranking-badge ai-badge">
                            <span class="badge-text">AI精选</span>
                        </div>
                    </div>
                    <div class="ranking-grid top5-grid" id="aiEssentialTools">
                        <!-- AI工具精选将在这里动态生成 -->
                    </div>
                </div>

                <!-- 吃喝玩乐推荐 Top 6 -->
                <div class="ranking-section">
                    <div class="ranking-header">
                        <div class="ranking-title">
                            <h3><i class="fas fa-utensils"></i> 吃喝玩乐推荐 Top 6</h3>
                            <p>精选优质生活服务平台，享受品质生活</p>
                        </div>
                        <div class="ranking-badge lifestyle-badge">
                            <span class="badge-text">生活精选</span>
                        </div>
                    </div>
                    <div class="ranking-grid lifestyle-grid" id="lifestyleServices">
                        <!-- 吃喝玩乐推荐将在这里动态生成 -->
                    </div>
                </div>

                <!-- 专业工具分类区域 -->
                <div class="professional-categories">
                    <div class="section-divider">
                        <h2><i class="fas fa-layer-group"></i> 专业工具分类</h2>
                        <p class="section-subtitle">按专业领域精心分类的工具推荐</p>
                    </div>

                    <!-- 开发工具专区 -->
                    <div class="ranking-section">
                        <div class="ranking-header">
                            <div class="ranking-title">
                                <h3><i class="fas fa-code"></i> 开发工具专区 Top 8</h3>
                                <p>程序员必备的开发工具和平台</p>
                            </div>
                            <div class="ranking-badge dev-badge">
                                <span class="badge-text">开发专用</span>
                            </div>
                        </div>
                        <div class="ranking-grid dev-grid" id="developerTools">
                            <!-- 开发工具将在这里动态生成 -->
                        </div>
                    </div>

                    <!-- 设计创意专区 -->
                    <div class="ranking-section">
                        <div class="ranking-header">
                            <div class="ranking-title">
                                <h3><i class="fas fa-palette"></i> 设计创意专区 Top 6</h3>
                                <p>设计师和创意工作者的必备工具</p>
                            </div>
                            <div class="ranking-badge design-badge">
                                <span class="badge-text">设计专用</span>
                            </div>
                        </div>
                        <div class="ranking-grid design-grid" id="designTools">
                            <!-- 设计工具将在这里动态生成 -->
                        </div>
                    </div>

                    <!-- 办公效率专区 -->
                    <div class="ranking-section">
                        <div class="ranking-header">
                            <div class="ranking-title">
                                <h3><i class="fas fa-briefcase"></i> 办公效率专区 Top 8</h3>
                                <p>提升工作效率的专业办公工具</p>
                            </div>
                            <div class="ranking-badge office-badge">
                                <span class="badge-text">办公专用</span>
                            </div>
                        </div>
                        <div class="ranking-grid office-grid" id="officeTools">
                            <!-- 办公工具将在这里动态生成 -->
                        </div>
                    </div>

                    <!-- 学习教育专区 -->
                    <div class="ranking-section">
                        <div class="ranking-header">
                            <div class="ranking-title">
                                <h3><i class="fas fa-book-open"></i> 学习教育专区 Top 8</h3>
                                <p>优质的在线学习和教育资源平台</p>
                            </div>
                            <div class="ranking-badge education-badge">
                                <span class="badge-text">教育专用</span>
                            </div>
                        </div>
                        <div class="ranking-grid education-grid" id="educationTools">
                            <!-- 教育工具将在这里动态生成 -->
                        </div>
                    </div>

                    <!-- 娱乐媒体专区 -->
                    <div class="ranking-section">
                        <div class="ranking-header">
                            <div class="ranking-title">
                                <h3><i class="fas fa-play-circle"></i> 娱乐媒体专区 Top 6</h3>
                                <p>热门的娱乐和媒体内容平台</p>
                            </div>
                            <div class="ranking-badge entertainment-badge">
                                <span class="badge-text">娱乐专用</span>
                            </div>
                        </div>
                        <div class="ranking-grid entertainment-grid" id="entertainmentTools">
                            <!-- 娱乐工具将在这里动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 分类导航区域 -->
            <div class="category-navigation">
                <h3><i class="fas fa-th-large"></i> 分类导航</h3>
                <div class="category-tabs">
                    <button class="category-tab active" data-category="efficiencyTools">
                        <i class="fas fa-tools"></i> 效率工具
                    </button>
                    <button class="category-tab" data-category="learningResources">
                        <i class="fas fa-graduation-cap"></i> 学习资源
                    </button>
                    <button class="category-tab" data-category="devTools">
                        <i class="fas fa-code"></i> 开发工具
                    </button>
                    <button class="category-tab" data-category="designTools">
                        <i class="fas fa-palette"></i> 设计工具
                    </button>
                    <button class="category-tab" data-category="aiTools">
                        <i class="fas fa-robot"></i> AI工具
                    </button>
                    <button class="category-tab" data-category="lifestyleServices">
                        <i class="fas fa-utensils"></i> 吃喝玩乐
                    </button>
                </div>
                
                <!-- 动态内容区域 -->
                <div class="category-content">
                    <div class="category-section active" data-category="efficiencyTools">
                        <div class="tools-grid" id="efficiencyTools">
                            <!-- 效率工具将在这里动态生成 -->
                        </div>
                    </div>
                    <div class="category-section" data-category="learningResources">
                        <div class="tools-grid" id="learningResources">
                            <!-- 学习资源将在这里动态生成 -->
                        </div>
                    </div>
                    <div class="category-section" data-category="devTools">
                        <div class="tools-grid" id="devTools">
                            <!-- 开发工具将在这里动态生成 -->
                        </div>
                    </div>
                    <div class="category-section" data-category="designTools">
                        <div class="tools-grid" id="designTools">
                            <!-- 设计工具将在这里动态生成 -->
                        </div>
                    </div>
                    <div class="category-section" data-category="aiTools">
                        <div class="tools-grid" id="aiTools">
                            <!-- AI工具将在这里动态生成 -->
                        </div>
                    </div>
                    <div class="category-section" data-category="lifestyleServices">
                        <div class="tools-grid" id="lifestyleServicesGrid">
                            <!-- 吃喝玩乐服务将在这里动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 个人收藏列表区域 (登录后显示) -->
        <div class="bookmarks-section" id="bookmarksSection" style="display: none;">
            <div class="section-header">
                <h2><i class="fas fa-bookmark"></i> 我的收藏</h2>
                <div class="header-actions">
                    <button class="import-btn" onclick="bookmarkManager.showImportDialog()" title="导入数据">
                        <i class="fas fa-upload"></i> 导入数据
                    </button>
                    <button class="export-btn" onclick="bookmarkManager.showExportDialog()" title="导出数据">
                        <i class="fas fa-download"></i> 导出数据
                    </button>
                    <div class="stats">
                        <span id="bookmarkCount">0</span> 个收藏
                    </div>
                </div>
            </div>
            
            <div class="filters-bar">
                <div class="search-bar">
                    <input type="text" id="searchInput" placeholder="搜索收藏的网站...">
                    <i class="fas fa-search"></i>
                </div>
                <div class="category-filter">
                    <select id="categoryFilter" class="category-filter-select">
                        <option value="">所有分组</option>
                    </select>
                </div>
                <button id="batchModeBtn" class="batch-mode-btn" onclick="bookmarkManager.toggleBatchMode()">
                    <i class="fas fa-check-square"></i> 批量操作
                </button>
                <div class="drag-hint">
                    <i class="fas fa-hand-rock"></i> 拖拽排序
                </div>
            </div>
            
            <!-- 批量操作工具栏 -->
            <div id="batchActions" class="batch-actions" style="display: none;">
                <div class="batch-info">
                    <span id="batchCountText">未选择</span>
                </div>
                <div class="batch-buttons">
                    <button id="selectAllBtn" onclick="bookmarkManager.toggleSelectAll()" class="btn-batch">
                        <i class="fas fa-check-square"></i> 全选
                    </button>
                    <button onclick="bookmarkManager.batchMove()" class="btn-batch btn-batch-move">
                        <i class="fas fa-arrows-alt"></i> 移动
                    </button>
                    <button onclick="bookmarkManager.batchDelete()" class="btn-batch btn-batch-delete">
                        <i class="fas fa-trash"></i> 删除
                    </button>
                </div>
            </div>
            
            <div class="categories-bar" id="categoriesBar">
                <!-- 分组标签将在这里动态生成 -->
            </div>

            <div id="bookmarksList" class="bookmarks-list">
                <div class="empty-state">
                    <i class="fas fa-bookmark"></i>
                    <h3>还没有收藏任何网站</h3>
                    <p>添加你第一个收藏的网站吧！</p>
                </div>
            </div>
        </div>
    </div>


    <!-- 分组管理对话框 -->
    <div id="categoryModal" class="modal">
        <div class="modal-content category-modal">
            <div class="modal-header">
                <h3><i class="fas fa-folder"></i> 管理分组</h3>
                <button class="modal-close" onclick="closeCategoryModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="add-category-form">
                    <h4>添加新分组</h4>
                    <div class="form-row">
                        <input type="text" id="newCategoryName" placeholder="分组名称" maxlength="100">
                        <input type="color" id="newCategoryColor" value="#667eea" title="选择颜色">
                        <select id="newCategoryIcon" title="选择图标">
                            <option value="fas fa-folder">📁 文件夹</option>
                            <option value="fas fa-briefcase">💼 工作</option>
                            <option value="fas fa-gamepad">🎮 娱乐</option>
                            <option value="fas fa-tools">🔧 工具</option>
                            <option value="fas fa-users">👥 社交</option>
                            <option value="fas fa-book">📚 学习</option>
                            <option value="fas fa-shopping-cart">🛒 购物</option>
                            <option value="fas fa-heart">❤️ 收藏</option>
                        </select>
                        <button id="addCategoryBtn" class="btn-primary">
                            <i class="fas fa-plus"></i> 添加
                        </button>
                    </div>
                    <input type="text" id="newCategoryDescription" placeholder="分组描述（可选）" maxlength="1000">
                </div>
                
                <div class="categories-list">
                    <h4>现有分组</h4>
                    <div id="categoriesListContainer">
                        <!-- 分组列表将在这里动态生成 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑分组对话框 -->
    <div id="editCategoryModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-edit"></i> 编辑分组</h3>
                <button class="modal-close" onclick="closeEditCategoryModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>分组名称</label>
                    <input type="text" id="editCategoryName" maxlength="100">
                </div>
                <div class="form-group">
                    <label>分组描述</label>
                    <input type="text" id="editCategoryDescription" maxlength="1000">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>颜色</label>
                        <input type="color" id="editCategoryColor">
                    </div>
                    <div class="form-group">
                        <label>图标</label>
                        <select id="editCategoryIcon">
                            <option value="fas fa-folder">📁 文件夹</option>
                            <option value="fas fa-briefcase">💼 工作</option>
                            <option value="fas fa-gamepad">🎮 娱乐</option>
                            <option value="fas fa-tools">🔧 工具</option>
                            <option value="fas fa-users">👥 社交</option>
                            <option value="fas fa-book">📚 学习</option>
                            <option value="fas fa-shopping-cart">🛒 购物</option>
                            <option value="fas fa-heart">❤️ 收藏</option>
                        </select>
                    </div>
                </div>
                <div class="modal-buttons">
                    <button id="saveEditCategoryBtn" class="btn-primary">保存</button>
                    <button onclick="closeEditCategoryModal()" class="btn-secondary">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- SortableJS库 -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    
    <!-- 工具函数 - 必须最先加载 -->
    <script src="js/utils/helpers.js?v=1.0"></script>
    
    <!-- 数据层 -->
    <script src="js/data/recommendedTools.js?v=1.0"></script>
    
    <!-- 服务层 -->
    <script src="js/services/apiService.js?v=1.0"></script>
    
    <!-- 管理器层 -->
    <script src="js/managers/uiManager.js?v=1.0"></script>
    <script src="js/managers/categoryManager.js?v=1.0"></script>
    <script src="js/managers/bookmarkManager.js?v=1.0"></script>
    
    <!-- 主应用 - 最后加载 -->
    <script src="app.js?v=1.0"></script>
</body>
</html>
